<template>
  <div class="create-order">
    <s-header :name='"填写订单"' /> 
    <div class="address-wrap" @click="goTo">
      
      <div class="address">
        {{ address.provinceName }}{{ address.cityName }}{{ address.countyName }} 
      </div>
      <div class="address-detail">
        {{ address.detailAddress }}
      </div>
      <div class="name">
        <span>{{ address.userName }} </span>
        <span>{{ address.userPhone }}</span>
      </div>
      <van-icon class="arrow" name="arrow" />
    </div>
    <div class="section">
      <div class="section-header">
        <van-icon name="shop-o" class="section-header-icon" size="20"/>
        <span>商品列表</span>
      </div>
      <div v-for="item in cartList" :key="item.id">
        <van-card
            :price="item.productPrice"
            :title="item.productName"
            :thumb="item.productPic"
          >
        <template #num>
          <van-stepper
            v-model="item.productQuantity"
            :max="5" 
            integer
            disable-input	
            style="margin-top: -2vw;"
            @click.native.stop="() => {}"
          />
        </template>
      </van-card>
      </div>
    </div>
    <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" >
      <div class="group-list">
        <van-radio-group v-model="payWay">
          <van-cell-group>
            <van-cell title="微信支付" clickable @click="payWay = '1'" >
              <template #icon>
                <div class="icon"> 
                  <van-icon name="wechat-pay" color="#2eca0f" size="25"/>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="1" checked-color="#f2140c"/>
              </template>
            </van-cell>
            <van-cell title="支付宝支付" clickable @click="payWay = '2'">
              <template #icon>
                <div class="icon">
                  <van-icon name="alipay" color="#008cd6" size="25"/>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="2" checked-color="#f2140c"/>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      <div class="pay">
        <van-button type="primary" size="large" round color="linear-gradient(to right, #ff6034, #ee0a24)" @click="handlePayOrder()">立即支付</van-button>
      </div>
      </div>
    </van-popup>
    <van-submit-bar :price="subPrice" button-text="提交订单" @submit="onSubmitOrder" />
  </div>
</template>

<script>

import sHeader from '@/components/SHeader';
import  { getDefaultAddress }  from '@/api/address';
import  { getCartList, delectCartBatch }  from '@/api/cart';
import  { createOrder, updateOrder }  from '@/api/order';
import { mapGetters } from 'vuex';
import { Toast } from 'vant';

export default {
  name: 'createOrder',
  data() {
    return {
      orderId: null,
      address: {},
      cartList: [],
      show: false,
      note: '',
      payWay: 0,
    }
  },
  created() {
    this.onLoad()
  },
  computed: {
    ...mapGetters(['id', 'name']),
    subPrice() {
      let sum = 0;
      // let _list = this.productList.filter(item => this.checkedIds.includes(item.id));
      this.cartList.forEach(item => {
        sum += item.productQuantity * 100 * item.productPrice;
      })
      return sum;
    }
  },
  components: {
    sHeader,
  },
  methods: {
    async onLoad() {
      const { data: address } = await getDefaultAddress(this.id).then(res => {
        return res;
      })
      if(address != null){
        this.address = address;
      } else {
        this.$router.push({ path: '/address', query: {from: 'create-order'} })
      }
      const cartItem = localStorage.getItem("cartItem") 
      const { data: cartList } = await getCartList().then(res =>{
        return res;
      })
      this.cartList = cartList.filter(item => cartItem.includes(item.id));
      console.log(this.cartList);
    },
    goTo() {
      Toast("1")
    },
    handlePayOrder() {
      if(this.orderId != null) {
        updateOrder({
          id: this.orderId,
          payType: this.payWay
        }).then(res =>{
          if(res.code === 200) {
            Toast.success("支付成功");
            this.$router.go('/order-list');
          }
      })
      } else {
        Toast.fail("支付失败");
        this.show = false
      }
    },
    async onSubmitOrder() {
      const { data: orderId } = await createOrder({
        memberId: this.id,
        memberUsername: this.name,
        totalAmount: this.subPrice/100,
        payAmount: this.subPrice/100,
        payType: 0,
        status: 0,
        deleteStatus: 0,
        receiverName: this.address.userName,
        receiverPhone: this.address.userPhone,
        receiverProvince: this.address.provinceName,
        receiverCity: this.address.cityName,
        receiverCounty: this.address.countyName,
        receiverDetailAddress: this.address.detailAddress,
        note: this.note,
        cartList: this.cartList
        }).then(res => {
          return res;
      })
      if(orderId != -1){
          this.orderId = orderId;
          this.show = true;
          const cartItem = localStorage.getItem("cartItem");
          await delectCartBatch(cartItem).then(res => {
            if(res.code === 200)
              localStorage.removeItem("cartItem");
          })
          await this.store.dispatch('cart/getCart')
      } else {
        Toast.fail("订单提交失败");
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .create-order {
    background: #f9f9f9;
    .address-wrap {
      margin-bottom: 20px;
      background: #fff;
      position: relative;
      font-size: 14px;
      padding: 15px;
      color: #222333;
      .name, .address {
        font-size: 10px;
        margin: 10px 0;
      }
      .address-detail {
        font-size: 16px;
      }
      .arrow {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
      }
      &::before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
        background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
        background-size: 80px;
        content: '';
      }
    }
    .section {
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      margin: 3.2vw 2.67vw;
      border-radius: 2.13vw;
      background-color: #fff;
      .section-header {
        font-size: 3.73vw;
        padding: 2.67vw 4vw;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        margin-bottom: 0.53vw;
        .section-header-icon {
          margin-right: 6px;
        }
        &::after {
          position: absolute;
          box-sizing: border-box;
          height: 0.4px;
          content: " ";
          pointer-events: none;
          top: 15%;
          right: 0;
          bottom: 0;
          left: 0;
          background: #ebedf0;
          background-size: 10px;
        }
      }
    }
    .group-list {
      margin-top: 15px;
      .icon {
        padding-right: 5px;
      }
      .pay {
        position: absolute;
        width: 100%;
        bottom: 0;
      }
    }
    :deep() .van-card {
      background-color: #fff;
    }
  }
</style>